<template>
  <div>
    <div v-if="role == 'person'" class="tip">
      <span>欢迎登陆户籍管理平台，您可以查看自己的户籍信息</span>
    </div>
    <div v-if="role == 'admin'">
      <p class="total_title">总数据统计</p>
      <el-row>
        <el-col :span="8">
          <p class="title">户籍信息</p>
          <div class="det">
            <p>
              家庭总数：<span>{{ houseNum }}</span>
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <p class="title">人口信息</p>
          <div class="det">
            <p>
              人口总数：<span>{{ personNum }}</span>
              <el-tooltip placement="top">
                <div slot="content">
                  男：<span>{{ menNum }}</span
                  ><br />女：<span>{{ womenNum }}</span>
                </div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </p>
            <p>
              迁入人口：<span>{{ moveInNum }}</span>
            </p>
            <p>
              迁出人口：<span>{{ moveOutNum }}</span>
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <p class="title">社区信息</p>
          <div class="det">
            <p>
              社区总数：<span>{{ communityNum }}</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MockCommunity from "../../mockData/community.js";
import MockHouse from "../../mockData/house.js";
import MockPerson from "../../mockData/person.js";
import { storage } from "../../utils/storage";
export default {
  data() {
    return {
      role: storage.getSession("role"),
      houseNum: null,
      personNum: null,
      communityNum: null,
      menNum: null,
      womenNum: null,
      moveInNum: null,
      moveOutNum: null
    };
  },
  mounted() {
    if (!storage.getStorage("community")) {
      storage.setStorage("community", MockCommunity);
    }
    if (!storage.getStorage("house")) {
      storage.setStorage("house", MockHouse);
    }
    if (!storage.getStorage("person")) {
      storage.setStorage("person", MockPerson);
    }
    if (this.role == "admin") {
      var personArr = storage.getStorage("person");
      this.houseNum = storage.getStorage("house").length;
      this.personNum = personArr.length;
      this.communityNum = storage.getStorage("community").length;
      this.menNum = personArr.filter(item => item.sex == "0").length;
      this.womenNum = personArr.filter(item => item.sex == "1").length;
      this.moveInNum = personArr.filter(item => item.personType == "2").length;
      this.moveOutNum = personArr.filter(item => item.personType == "1").length;
    }
  }
};
</script>

<style lang="scss" scoped>
.tip {
  text-align: center;
  overflow: hidden;
  padding-top: 150px;
  font-size: 22px;
}
.total_title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 30px;
}
.title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #666;
}
.det {
  display: block;
  padding: 0 15px;
  font-size: 15px;
  line-height: 28px;
  color: #666;
  .el-icon-question {
    color: #409eff;
  }
  span {
    font-size: 18px;
    color: #333;
  }
}
</style>
